import { Component } from '../core/Component.js';

/**
 * 按钮组件
 */
export class Button extends Component {
  constructor(props = {}) {
    super(props);
    this.text = props.text || '按钮';
    this.onClick = props.onClick || (() => {});
    this.style = props.style || {};
  }

  /**
   * 设置按钮文本
   * @param {string} text 新的文本内容
   */
  setText(text) {
    this.text = text;
    if (this.element) {
      console.log('setText被调用，新文本:', text);
      console.log('当前DOM文本:', this.element.textContent);
      
      // 强制清空并重新设置文本
      this.element.textContent = '';
      this.element.innerHTML = '';
      
      // 添加文本更新的视觉反馈
      this.element.style.transform = 'scale(1.05)';
      this.element.style.transition = 'all 0.2s ease';
      
      // 使用多种方式设置文本，确保更新
      this.element.textContent = text;
      this.element.innerText = text;
      
      // 强制重绘
      this.element.offsetHeight; // 触发重绘
      
      // 恢复原始大小
      setTimeout(() => {
        this.element.style.transform = 'scale(1)';
        console.log('setText完成，最终DOM文本:', this.element.textContent);
      }, 150);
      
      console.log('按钮文本已更新为:', text);
    } else {
      console.error('setText失败：element为null');
    }
  }

  /**
   * 重写update方法，避免重新创建DOM元素
   */
  update() {
    // 不重新创建DOM元素，只重新应用样式
    if (this.element) {
      this.applyStyle();
    }
  }

  applyStyle() {
    if (!this.element) return;
    
    // 基础样式
    this.element.style.padding = '12px 20px';
    this.element.style.borderRadius = '6px';
    this.element.style.border = 'none';
    this.element.style.cursor = 'pointer';
    this.element.style.transition = 'all 0.3s ease';
    this.element.style.fontSize = '16px';
    this.element.style.fontWeight = 'bold';
    this.element.style.minWidth = '150px';
    this.element.style.textAlign = 'center';
    
    // 确保文本显示正确
    this.element.style.whiteSpace = 'nowrap';
    this.element.style.overflow = 'visible';
    this.element.style.textOverflow = 'clip';
    this.element.style.display = 'inline-block';
    this.element.style.verticalAlign = 'middle';
    
    // 主题样式
    if (this.theme && this.theme.mode) {
      if (this.theme.mode === 'dark') {
        this.element.style.backgroundColor = this.theme.primaryColor;
        this.element.style.color = '#ffffff';
        this.element.style.border = '2px solid #555';
        this.element.style.boxShadow = '0 2px 4px rgba(0,0,0,0.3)';
      } else {
        this.element.style.backgroundColor = this.theme.primaryColor;
        this.element.style.color = '#ffffff';
        this.element.style.border = '2px solid #ddd';
        this.element.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
      }
    } else {
      // 默认样式
      this.element.style.backgroundColor = '#4285f4';
      this.element.style.color = '#ffffff';
      this.element.style.border = '2px solid #ddd';
    }
    
    // 悬停效果
    this.element.onmouseenter = () => {
      this.element.style.opacity = '0.8';
      this.element.style.transform = 'translateY(-1px)';
    };
    this.element.onmouseleave = () => {
      this.element.style.opacity = '1';
      this.element.style.transform = 'translateY(0)';
    };
    
    // 点击效果
    this.element.onmousedown = () => {
      this.element.style.transform = 'translateY(1px)';
    };
    this.element.onmouseup = () => {
      this.element.style.transform = 'translateY(0)';
    };
    
    // 自定义样式（覆盖主题样式）
    for (const [key, value] of Object.entries(this.style)) {
      this.element.style[key] = value;
    }
    
    console.log('applyStyle完成，当前按钮文本:', this.element.textContent);
  }

  render() {
    this.element = document.createElement('button');
    this.element.textContent = this.text;
    
    // 绑定点击事件
    this.element.addEventListener('click', (event) => {
      console.log('按钮被点击:', this.text);
      if (this.onClick) {
        this.onClick.call(this, event);
      }
    });
    
    this.applyStyle();
    return this.element;
  }
}